<template>
    <div class='goodinfo'>


        <!-- 购物车小球飞入 -->
        <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
        >
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
           

        <!-- 商品轮播区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<Swiper :lunBotoList="swiperImg" :isfull="false" :time='5000'></Swiper>
					</div>
				</div>
        </div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">{{list.desc}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class='price'>
                            市场价：<del>{{list.oldprice}}</del>&nbsp;&nbsp;销售价：
                            <span class='now_price'>￥{{list.price}}</span>
                        </p>
                        <p>购买数量：
                            <GoodInfoBox @getcount="getSelectCount" :max="list.kucun"></GoodInfoBox>

                        </p>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addToCar">加入购物车</mt-button>
                        </p>
					</div>
				</div>

        </div>
        <!-- 商品参数区域 -->

        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <p>商品货号：{{list.hnum}}</p>
                        <p>商品库存：{{list.kucun}}</p>
                        <p>上架时间：{{list.stime}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click='getPAndTintro(list.id)'>图文介绍</mt-button>
                    <br>
                    <mt-button type="danger" size="large" plain @click="getComponent(list.id)">商品评论</mt-button>
                    <!-- 加入购物车的时候拿到选择的数量 -->
                    <!-- 1.按钮属于goodsinfo页面，数字属于numberboxz组件 -->
                    <!-- 2.由于涉及到父子组件的嵌套，所以无法直接在 goodinfo页面中
                    获取到选中商品的数量值 -->
                    <!-- 3.如何解决？：
                    设计到子组件向父组件传值（事件调用机制）
                    父向子传递方法，并将数据带过去
                     -->

                </div>
        </div>
    </div>
</template>
<script>
// 导入轮播组件
import Swiper from './Swiper';
// 导入商品数量加减组件
import GoodInfoBox from './GoodInfo_num';

export default {
    data () {
        return {
            id:this.$route.params.id,  //通过route参数获取id
            swiperImg:'',   //轮播图图片
            list:[],    //获取到商品的信息
            ballFlag: false,  //控制小球的限时和隐藏 
            selectedCount:1,    ///保存用户选中的商品数量
        }
    },
    methods: {
        getgoodinfo(id){
             this.$http.get('http://localhost:1000/mobileGoods').then(res=>{           
                 res.body.forEach(element => {                     
                     if(element.id==id){ 
                         this.list=element;
                        element.imgs.forEach(res=>{
                            res.img=res.img_url;
                        })           
                         this.swiperImg=element.imgs;  
                        // console.log(this.list)
                     }
                 });
             })
        },
        
        getPAndTintro(id){
            this.$router.push("/home/goodinfo/picinfo/"+id)
        },
        // 获取评论
        getComponent(id){
             this.$router.push({path:"/home/goodinfo/infocomponent/"+id})
        },


        // 添加到购物车
        addToCar(){
            console.log("click")
            this.ballFlag=!this.ballFlag;
        //  {id：商品id,count:购买的数量，selected:false}
        // 拼接处一个需要保存到store中的数据格式
        var goodinfo = {
            id:this.id,
            count:this.selectedCount,
            price:this.list.price, 
            selected:true,
            topic:this.list.title,
            pic:this.list.img_url
            };
        // 调用store中的mutations来保存商品数据
        this.$store.commit("addToCar", goodinfo)
        console.log(this.$store.state.car)

        },
        beforeEnter(el){
             console.log("beforeEnter")
            el.style.transform="translate(0,0)";
        },
        enter(el,done){
            console.log("enter")
            // 优化小球动画的思路：
            // 1。由于位置定死，所以小球在不同分辨率不同情况下，会出现问题
            // 2只要动态获取小球的横纵坐标，就能解决问题
                // 3.徽标的横坐标减小球的横坐标，徽标的纵坐标减小球的纵坐标就是需要为唯一的距离
            // 获取小球位置
            const ballPositon=this.$refs.ball.getBoundingClientRect();
        
            // // hu获取徽标 的位置
            const badgePosition=document.getElementById("badge").getBoundingClientRect();

            const xDist=badgePosition.left-ballPositon.left;
            const yDist=badgePosition.top-ballPositon.top;
            // el.offsetWidth;
            setTimeout(()=>{
                 el.style.transform=`translate(${xDist}px,${yDist}px)`;
                 el.style.transition="all 1s cubic-bezier(.29,-0.42,.64,1.02)";        
                 done()        
            },100)
            
        },
        afterEnter(el) {
            console.log("afterEnter")
             setTimeout(()=>{
                this.ballFlag = !this.ballFlag;
                // console.log(this.ballFlag)
            },500)  
        },
        getSelectCount(count){
            // 子组件将选中的数量传递给父组件的时候，将 值保存到data s上
            this.selectedCount=count;
            console.log("父组件拿到的值："+this.selectedCount)
        }
    },
    
    created () {
        this.getgoodinfo(this.id);
    },
    components: {
        Swiper,GoodInfoBox
    }
}
</script>
<style lang="scss" scoped>
    .goodinfo{
        position: relative;
        background: #eee;
        overflow: hidden;
        
    }
    .now_price{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .mui-card-footer{
        display: block;
    }
    .ball{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 99;
        left: 146px;
        top: 368px;
        // transform: translate(85px,211px)
    }
</style>
